<template>
  <view class="container">
    <nav-bar title="个人资料" :showBack="true"></nav-bar>
    
    <view class="content">
      <!-- 头像 -->
      <view class="form-item">
        <text class="label">头像</text>
        <view class="avatar-wrapper" @click="chooseImage">
          <image class="avatar" :src="userInfo.avatar || '/static/head.png'" mode="aspectFill"></image>
          <uni-icons type="forward" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 昵称 -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" />
      </view>
      
      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <text>{{userInfo.phone}}</text>
      </view>
      
      <!-- 保存按钮 -->
      <view class="save-btn" @click="handleSave">
        <text>保存</text>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'

export default {
    components: {
        NavBar
    },
  data() {
    return {
      userInfo: {
        avatar: '',
        nickname: '',
        phone: '138****8888'
      }
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
        }
      })
    },
    handleSave() {
      // TODO: 保存个人资料
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  background-color: #fff;
  margin-bottom: 2rpx;
  
  .label {
    font-size: 28rpx;
    color: #333;
  }
  
  input {
    text-align: right;
    font-size: 28rpx;
  }
  
  .avatar-wrapper {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }
}

.save-btn {
  margin-top: 40rpx;
  background-color: #1890ff;
  text-align: center;
  padding: 30rpx 0;
  border-radius: 8rpx;
  
  text {
    font-size: 28rpx;
    color: #fff;
  }
}
</style>